<template>
	<view class="text-center padding-xl bg-white box">
		<view class="padding-top text-xsl">
			<text class="iconfont icon-wechat"></text>
		</view>
		<view class="text-sl">微信登录</view>
		<view class="margin-top">请使用微信授权登录</view>
		<button open-type="getUserInfo" @getuserinfo="login" class="cu-btn bg-blue round lg">立即授权</button>
		<view class="margin-top" @tap='back'>取消</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">授权手机号</view>
				</view>
				<view class="padding-xl">
					<text class="text-sm">
						科爱住需要您的手机号进行门锁绑定，在开锁时需要使用，以及短信通知
					</text>
					<button open-type="getPhoneNumber" @getphonenumber='getphonenumber' class="bg-yellow margin-top text-white">授权</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {login,wxLogin,isHasPhone} from '@/api/api.js'
	export default {
		data() {
			return {
				modalName:null
			};
		},
		onShow(){
			const Authorization = uni.getStorageSync('Authorization');
			if(Authorization&&uni.userInfo){
				this.modalName = 'Modal';
			}
		},
		components:{
			
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			login(){
				this.getUserInfo();
			},
			getphonenumber(e){
				isHasPhone(e.detail).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'success',
							title:'授权成功',
							duration:1500
						})
						uni.userInfo.phone = 1213213241
						this.modalName=null;
						uni.navigateBack();
						uni.$emit('updateHotelList');
					}
				})
			},
			isHavePhoneNumber(){
				isHasPhone({phone:null}).then(res=>{
					if(res.data==1){
						this.modalName='Modal';
					}else if(res.data){
						uni.showModal({
							title:"您是否还在使用"+res.data+"手机号，如果更换手机号，您将无法收到我们的服务信息",
							cancelText:'没有',
							confirmText:'换过',
							success: (e) => {
								if(e.confirm){
									this.modalName='Modal'
								}else if(e.cancel){
									uni.navigateBack();
									uni.$emit('updateHotelList');
								}
							}
						})
					}else{
						uni.navigateBack();
						uni.$emit('updateHotelList');
					}
				})
			},
			getUserInfo(){
				uni.login({
					success:(e)=>{
						wxLogin(e).then(res=>{
							uni.getUserInfo({
								withCredentials:true,
								success:(e)=>{
									login({...e,sessionKey:res.data.session_key}).then(res=>{
										this.userInfo=res.data;
										uni.userInfo = res.data;
										if(!res.data.phone){
											this.modalName='Modal'
										}else{
											uni.navigateBack();
											uni.$emit('updateHotelList');
										}
									});
									// this.userInfo=e.userInfo;
								}
							})
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		.icon-wechat{
			font-size: 100rpx;
			color: #07c160;
		}
		.text-sl{
			margin-top: 100rpx;
		}
		.bg-blue{
			background-color: #07c160;
			width: 300rpx;
			margin-top: 300rpx;
		}
	}
</style>
